<template>
  <div class="table-query">
    <editable-form
      ref="tableFormRef"
      :form-data="tableFormData"
      :form-items="tableFormItems"
      :form-rows="tableFormRows"
    >
    </editable-form>
    <div class="table-query-btn">
      <el-button type="primary" @click="handleQuery">搜索</el-button>
      <el-button @click="resetQuery">重置</el-button>
    </div>
  </div>

  <c-table
    :loading="loading"
    :data="itemList"
    :columns="tableColumn"
    @selectionChange="handleSelectionChange"
  >
  </c-table>
</template>

<script>
export default {
  components: {},
  props: {
    msg: {
      type: String,
      default: "",
    },
  },
  setup() {
    const store = useStore();

    const tableFormRef = ref();
    const pageData = reactive({
      tableFormData: {
        roleName: "",
      },
      tableFormItems: [
        {
          type: "input",
          label: "角色名称",
          prop: "roleName",
        },
        {
          type: "input",
          label: "权限字符",
          prop: "roleKey",
        },
        {
          type: "select",
          label: "状态",
          prop: "state",
          options: computed(() => {
            return store.getters.dict.state;
          }),
          valueStr: "code",
          labelStr: "name",
        },
      ],
      tableFormRows: [3],
      loading: false,
      itemList: [],
      tableColumn: [
        {
          type: "selection",
        },
        {
          type: "index",
          label: "序号",
        },
        {
          type: "ellipsis",
          label: "角色名称",
          prop: "roleName",
          minWidth: "150",
        },
        {
          type: "ellipsis",
          label: "权限字符",
          prop: "roleKey",
          minWidth: "150",
        },
        {
          type: "select",
          label: "状态",
          prop: "state",
          dict: computed(() => {
            return store.getters.dict.state;
          }),
          valueStr: "code",
          labelStr: "name",
        },
        {
          type: "normal",
          label: "显示顺序",
          prop: "displayOrder",
          minWidth: "100",
        },
      ],
    });
    onMounted(async () => {
      const data = await store.dispatch("dict/setDict", ["state"]);
      console.log("!!!!!", data, store.getters.dict.state);
    });
    const handleSelectionChange = () => {};
    return {
      ...toRefs(pageData),
      tableFormRef,
      handleSelectionChange,
    };
  },
};
</script>

<style scoped>
.read-the-docs {
  color: #888;
}
</style>
